<template>
  <div class="member-orders">
    <el-form :inline="true"
      style="margin-bottom:22px">
      <el-form-item>
        <el-dropdown @command="setState">
          <span class="el-dropdown-link">
            {{stateStr}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{title:'全部状态',id:''}">全部状态</el-dropdown-item>
            <el-dropdown-item :command="{title:'已退房',id:'4'}">已退房</el-dropdown-item>
            <el-dropdown-item :command="{title:'已取消',id:'3'}">已取消</el-dropdown-item>
            <el-dropdown-item :command="{title:'待入住',id:'1'}">待入住</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item>
        <el-dropdown @command="setTimeType">
          <span class="el-dropdown-link">
            {{timeTypeStr}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{title:'全部时间类型',id:''}">全部时间类型</el-dropdown-item>
            <el-dropdown-item :command="{title:'下单时间',id:'1'}">下单时间</el-dropdown-item>
            <el-dropdown-item :command="{title:'入住时间',id:'2'}">入住时间</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="startEndTime"
          type="daterange"
          :disabled="!timeType"
          range-separator="至"
          @change="timeChange"
          start-placeholder="开始时间"
          value-format="yyyy-MM-dd"
          size="small"
          end-placeholder="结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
          @click.native="resetData"
          style=" line-height: 32px;padding: 0 21px;">
          <i class="el-icon-search"></i>
        </el-button>
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item>
        <el-table :data="couponOrderList"
          max-height="550">
          <el-table-column prop="orderNum"
            label="订单号">
          </el-table-column>
          <el-table-column prop="orderTime"
            label="下单时间">
          </el-table-column>
          <el-table-column prop="hotelName"
            label="酒店名称">
          </el-table-column>
          <el-table-column prop="roomName"
            label="房型">
          </el-table-column>
          <el-table-column prop="checkIn"
            label="入住时间">
          </el-table-column>
          <el-table-column prop="roomNum"
            label="间/晚">
          </el-table-column>
          <el-table-column prop="roomMoney"
            label="支付房费">
          </el-table-column>
          <el-table-column prop="money"
            label="订单总金额">
          </el-table-column>
          <el-table-column prop="stateCHI"
            label="订单状态">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text"
                size="small"
                @click="viewOrderDetail(scope.row.orderId)">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item style="margin-top: 20px;">
        <el-pagination @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, prev , pager , next, sizes, jumper"
          :total="total">
        </el-pagination>
      </el-form-item>
    </el-form>
    <div class="information-btn">
      <el-form-item>
        <el-button @click="$router.back()" size="small">返回</el-button>
      </el-form-item>
    </div>
  </div>
</template>
<script>
const Breadcrumb = () => import("@/components/common/Breadcrumb");
import { queryCouponOrderList } from "@/public/js/member";
export default {
  data() {
    return {
      couponOrderList: [],
      id: "",
      total: 0,
      pageNo: 1,
      pageSize: 10,
      startTime: "",
      endTime: "",
      state: "",
      search: "",
      timeTypeStr: "全部时间类型",
      timeType: "",
      stateStr: "全部状态",
      startEndTime: [],
    };
  },
  created() {
    //window.commo.showMenu(this)
    this.id = this.$route.query.id;
    this.getCouponOrderList();
  },
  methods: {
    setTimeType(command) {
      this.timeTypeStr = command.title;
      this.timeType = command.id;
      if (!this.timeType) {
        this.startTime = "";
        this.endTime = "";
        this.startEndTime = [];
        this.resetData();
      }
    },
    timeChange(value) {
      if (value) {
        this.startTime = value[0];
        this.endTime = value[1];
      } else {
        this.startTime = "";
        this.endTime = "";
      }
      this.resetData();
    },
    setState(value) {
      this.stateStr = value.title;
      this.state = value.id;
      this.resetData();
    },
    resetData() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.getCouponOrderList();
    },
    getCouponOrderList() {
      queryCouponOrderList({
        userId: this.id,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        startTime: this.startTime,
        endTime: this.endTime,
        state: this.state,
        timeType: this.timeType,
      }).then(res => {
        if (!res.data.errCode) {
          this.couponOrderList = res.data.couponOrderList;
          this.total = res.data.total;
        }
      });
    },
    viewOrderDetail(id) {
      this.$router.push({ path: "/index/orderDetail?id=" + id });
    },
    //  分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getCouponOrderList();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getCouponOrderList();
    }
  },
  components: {
    Breadcrumb
  }
};
</script>
<style lang="scss">
</style>
